﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>产品分类</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="__STATIC__heiseshop_admin/style/adminStyle.css" rel="stylesheet" type="text/css" />
<script src="__STATIC__heiseshop_admin/js/jquery.js"></script>
<script src="__STATIC__heiseshop_admin/js/public.js"></script>
<link rel="stylesheet" href="__STATIC__heiseshop_admin/css/amazeui.min.css" />
<link rel="stylesheet" href="__STATIC__heiseshop_admin/css/amazeui.datatables.min.css" />
<link rel="stylesheet" href="__STATIC__heiseshop_admin/css/app.css">
<script src="__STATIC__heiseshop_admin/js/amazeui.min.js"></script>
</head>
<style>
        .am-fr a{
          color: black;
          background-color: black;
        }
        th{
          text-align: center;
        }
      </style>
<body>
 <div class="wrap">
  <div class="page-title">
    <span class="modular fl"><i></i><em>产品分类</em></span>
    <span class="modular fr"><a href="add_category.html" class="pt-link-btn">+添加新分类</a></span>
  </div>
  
  <table class="list-style">
   <tr>
    <th style="width:25%">分类名称</th>
    <th style="width:25%">是否显示</th>
    <th style="width:25%">排序</th>
    <th style="width:25%">操作</th>
   </tr>
   <tbody id="ajax-tbody"></tbody>

  </table>
  
  <!-- BatchOperation -->
  <div style="overflow:hidden;">
      <!-- Operation -->
	  <div class="BatchOperation fl">
	   <input type="checkbox" id="del"/>
	   <label for="del" class="btnStyle middle">全选</label>
	   <input type="button" value="批量删除" class="btnStyle piliang"/>
	  </div>
	  <!-- turn page -->
	  <div class="am-u-lg-12 am-cf" style="width:83%">
        <div class="am-fr ajax-page">
            {$page}
        </div>
    </div>
  </div>
 </div>
</body>
</html>
<script src="__STATIC__heiseshop_admin/js/template.js"></script>
<script type="text/html" id="ajax-content">
    <%for (var i = 0; i<data.length; i++){%>
        <tr>
            <td>
             <input type="checkbox" name="checkbox" value="<%=data[i].id%>"/>
             <span><%=data[i].name%></span>
            </td>
            <td class="center"><img src="__STATIC__heiseshop_admin/images/yes.gif"/></td>
            <td class="center"><input type="text" value="<%=data[i].desc%>" style="width:50px;text-align:center;"/></td>
            <td class="center"><a class="block delete" title="移除"  data-id="<%=data[i].id%>"><img src="__STATIC__heiseshop_admin/images/icon_trash.gif"/></a></td>
        </tr>
        <%if (data[i].son){%>
            <%for (var a = 0; a<data[i]['son'].length; a++){%>
                <tr>
                    <td style="text-indent:2em;">
                        <input type="checkbox" name="checkbox" value="<%=data[i].id%>"/>
                        <span><%=data[i]['son'][a].name%></span>
                    </td>
                    <td class="center"><img src="__STATIC__heiseshop_admin/images/no.gif"/></td>
                    <td class="center"><input type="text" value="<%=data[i]['son'][a].desc%>" style="width:50px;text-align:center;"/></td>
                    <td class="center"><a class="block delete" data-id="<%=data[i]['son'][a].id%>" title="移除"><img src="__STATIC__heiseshop_admin/images/icon_trash.gif"/></a></td>
                </tr>
            <%}%>
        <%}%>
    <%}%>
</script>
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">是否删除</div>
        <span id="span" style="display:none"></span>
        <div class="am-modal-footer">
        <span class="am-modal-btn" data-am-modal-cancel>取消</span>
        <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>

<script>
$(function(){
    $('#ajax-tbody').on('click','.delete',function(){
        var id=$(this).data('id');
        $('#span').html(id);
        $('#my-confirm').modal({
            onConfirm: function(){
                $.ajax({
                    data:'id='+$('#span').html(),
                    url:"{:url('category_delect')}",
                    success:function(res){
                        ajax();
                    }
                })
            }
        })
        return false;
    })
})
function ajax (url) {
    var config = {
        success : function (res) { 
            tpl(res)
        }
    };
    if (url) {
        config.url = url;
    }else{
        config.data='page='+$('input[name=current_page]').val();
    }
    $.ajax(config);
}
ajax();

$('.ajax-page').on('click' , 'a' , function(){
    var _this = $(this);
    ajax(_this.attr('href'));
    var now_page=$(this).html();    
    $.ajax({
            data:'now_page='+now_page,
            url:"{:url('product_category')}",
            success:function(res){
                var html = template(document.getElementById('ajax-content').innerHTML , {'data':res.cat_son_list});
                $('#ajax-tbody').html(html);      
            }
        })
    return false;
});

function tpl(res){
    var html = template(document.getElementById('ajax-content').innerHTML , {'data':res.cat_son_list});
    $('#ajax-tbody').html(html);
    $('.ajax-page').html(res.page);
    $('.ajax-page').append('<input type="hidden" name="current_page" value="'+res.current_page+'">');        
}
$('#del').click(function(){
  if(this.checked){
      $('input[name="checkbox"]').each(function(){
          this.checked=true;
      })
  }else{
      $('input[name="checkbox"]').each(function(){
          this.checked=false;
      })
  }
})
$('.piliang').click(function(){
       $('#my-confirm').modal({
            onConfirm: function(){
              $('input[name="checkbox"]:checked').each(function(){
                var id=$(this).val();   
                $.ajax({
                    data:'id='+id,
                    url:"{:url('category_delect')}",
                    success:function(res){
                        ajax();
                        $("#del").removeAttr("checked");
                    }
                })
            })
        }
    })
})
</script>